import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'

import index from '@/components/home/index'
import list from '@/components/home/list'
import detail from '@/components/home/detail'
import introduce from '@/components/home/introduce'

import user from '@/components/user/user'
import login from '@/components/user/login'
import register from '@/components/user/register'
import test from '@/components/test/test3'

Vue.use(Router)
//const user = {
//	template: '<div>User{{ $route.params.id }}</div>'
//}

const router = new Router({
	linkActiveClass: 'active',
	hashbang: true, // 将路径格式化为#!开头
	history: true,
	routes: [{
			path: '/',
			redirect: '/index'
		},
		{
			path: '/index',
			component: index
		},
		{
			path: '/introduce',
			component: introduce
		},
		{
			path: '/test',
			name: 'test',
			component: test
		},
		{
			path: '/user',
			component: user,
			children: [{
					path: 'login',
					component: login
				},
				{
					path: 'register',
					component: register
				}
			]
		},
		{
			path: '/news:newsId',
			component: detail
		},
		{
			path: '/:category',
			component: list,
			children: [{
				path: '',
				component: list
			},{
				path: 'news:newsId',
				component: detail
			}]
		}
	]
})

/**
 * @desc 全局监听路由变化
 */
router.beforeEach((to, from, next) => {
	store.dispatch('updateHistoryLength') // 变化时更新路由切换长度
	next()
})
router.afterEach((to, from, next) => {
	//store.dispatch('observerFooter')
	//	document.title = to.name
})
export default router